<script setup>
import { ref } from 'vue';
const links = ref([
    {
        name: 'home',
        path: '/home',
        label: 'Home',
    },
    {
        name: 'book',
        path: '/book',
        label: '书签',
    },
    {
        name: 'user',
        path: '/user',
        label: '用户',
    },
])
</script>

<template>
    <div class="grid grid-cols-2 gap-2">
        <div>
            <router-link class="duration-300 ease-in-out hover:text-blue-500 font-bold" v-for="link in links" :to="{ path: link.path, params: {} }">{{ link.label }} | </router-link>
        </div>
        <div class="flex justify-end">
            <router-link class="duration-300 ease-in-out hover:text-blue-500 font-bold" :to="{ path: '/setting', params: {} }">
                <el-icon :size="20" :style="{ cursor: 'pointer' }">
                    <Setting />
                </el-icon>
            </router-link>
        </div>
    </div>
</template>
<style scoped></style>
